<template>
  <el-menu
    default-active="2"
    class="homepage_menu"
    background-color="#304156"
    text-color="#fff"
    active-text-color="#409fff"
    :router="true"
  >
    <el-submenu :index="menu.id + ''" v-for="menu in menus" :key="menu.id">
      <template slot="title">
        <i :class="['iconfont', menu.icon]"></i>
        <span>{{ menu.title }}</span>
      </template>
      <el-menu-item
        :index="'/' + menu.name + '/' + submenu.name"
        v-for="submenu in menu.children"
        :key="submenu.id"
      >
        <i :class="['iconfont', submenu.icon]"></i>
        {{ submenu.title }}</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    menus() {
      return this.$store.getters.menus;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.homepage_menu {
  position: absolute;
  width: 250px;
  top: 70px;
  left: 0;
  bottom: 0;
}
</style>